<template>
	<div class="bgimg" :style="{ height: bodyHeight + 'px' }">
		<div class="reg">
			<van-nav-bar @click-right="onClickRight">
				<span slot="right">
       				{{$t('FindPwd.v1')}}
      			</span>
			</van-nav-bar>
		</div>
		<div class="login">
			<div class="title">
				<van-image width="100" height="100" :src="picture" round/>
			</div>
			<div class="main">
				<div class="text">
					<van-cell-group>
						<van-field v-model.trim="Account" clearable :placeholder="$t('FindPwd.v3')" :label="$t('FindPwd.v15')" left-icon="contact" maxlength="20" />
					</van-cell-group>
				</div>
				<div class="text">
					<van-cell-group>
						<van-field v-model.trim="userPassword" clearable :placeholder="$t('FindPwd.v4')" :label="$t('FindPwd.v16')" left-icon="smile-o" maxlength="20" type="password" />
					</van-cell-group>
				</div>
				<div class="text">
					<van-cell-group>
						<van-field v-model.trim="userPassword2" clearable :placeholder="$t('FindPwd.v5')" :label="$t('FindPwd.v16')" left-icon="smile-o" maxlength="20" type="password" />
					</van-cell-group>
				</div>
				<div class="btn">
					<van-button type="primary" @click.native="Find" :loading="loading">{{$t('FindPwd.v2')}}</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { base } from './../utils/api';
	import { debounce } from './../utils/debounce'; // 函数节流-高频操作需要
	import { Dialog } from 'vant';
	let _this;
	export default {
		name: 'Login',
		components: {},
		props: {},
		data() {
			return {
				bodyHeight: '',
				Account: '',
				userPassword: '',
				userPassword2: '',
				k: '', // 凭证K值
                v: '', // 凭证V值
				loading: false,
				picture: require('./../assets/images/my.png'),
				list: [],
				listArray: [],
				listString: '',
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {
			userName: function() {
				this.userName = this.userName.replace(/[\u4e00-\u9fa5]/ig, ''); // 帐号不能输入中文
			},
			userPassword: function() {
				this.userPassword = this.userPassword.replace(/[\u4e00-\u9fa5]/ig, ''); // 密码不能输入中文
			},
			userPassword2: function() {
				this.userPassword2 = this.userPassword2.replace(/[\u4e00-\u9fa5]/ig, ''); // 密码不能输入中文
			}
		},
		computed: {},
		methods: {
			getUserName(val) { // 助记词查询
				base.getUserNameZJC({
					'userName': val,
				}).then(res => {
					if(res.code == 200) {
						this.list = res.data;
						if(this.list) {
							this.isOk = true;
							this.Account = val;
							Dialog.confirm({
							  title: _this.$t('FindPwd.v7'),
							  message: _this.$t('FindPwd.v8') +'【'+ val +'】',
							  cancelButtonColor: '#A9A9A9',
							  cancelButtonText: _this.$t('FindPwd.v9'),
							  confirmButtonText: _this.$t('FindPwd.v6')
							}).then(() => {
							  	this.$router.push({
									path: '/FindPwdAux',
									query: {
										code: this.Account,
										list: sessionStorage.setItem("list",JSON.stringify(this.list))
									}
								})
							}).catch(() => {
							  // on cancel
							  this.isOk = false;
							});
						}
					}
				})
			},
			onClickRight() {
				this.$router.push({
					path: '/Login'
				});
			},
			Find() {
				if(this.Account == '') {
					this.$toast(this.$t('FindPwd.v10'));
					return false;
				} else {
					if(this.Account.length < 4 || this.Account.length > 20) {
						this.$toast(this.$t('FindPwd.v11'));
						return false;
					}
				}
				if(this.Pwd == '') {
					this.$toast(this.$t('FindPwd.v12'));
					return false;
				} else {
					if(this.Pwd.length < 6 || this.Pwd.length > 20) {
						this.$toast(this.$t('FindPwd.v13'));
						return false;
					}
				}
				if(this.Pwd != this.Pwd2) {
					this.$toast(this.$t('FindPwd.v14'));
					return false;
				}
				this.loading = true;
				base.getCredentials().then(res => {
					if(res.code == 8008) {
						this.k = res.data.k;
						this.v = res.data.v;
						base.getForgetPwd({
							'userName': this.Account,
							'auxiliaries': this.listString,
							'encryptedData': this.rsaEncrypt(this.Pwd + ',' + this.Pwd2 + ',' + this.v),
							'key': this.k
						}).then(res => {
							if(res.code == 200) {
								setTimeout(() => {
									this.$router.push('/Login');
								}, 1000);
							}
							this.$toast(res.msg);
							this.loading = false;
						})
					}
				})
			}
		},
		created() {
			this.$watch('Account', debounce((val) => { // 这里的 val 是输入的值
				if(this.$route.query.code){
					this.$route.query.code = 0;
				}else{
					if(val) { // 如果存在才执行
						this.getUserName(val);
					}
				}
			}, 200));
		},
		mounted() {
			this.bodyHeight = document.documentElement.clientHeight;
			if(sessionStorage.getItem("listString")){
				this.listString = sessionStorage.getItem("listString");
			}
			if(sessionStorage.getItem("list")){
				sessionStorage.removeItem("list");
			}
			if(this.$route.query.code){
				this.Account = base64.decode(this.$route.query.code);
			}
		},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	.reg /deep/ .van-nav-bar {
		background-color: transparent;
	}
	
	.reg /deep/ .van-nav-bar__left,
	.van-nav-bar__right {
		color: white;
	}
	
	.reg /deep/ .van-nav-bar .van-icon {
		color: white;
	}
	
	.reg /deep/ .van-hairline--bottom::after {
		border: 0;
	}
	
	.bgimg {
		height: 100%;
		background: url('../assets/images/bg.jpg') no-repeat left top;
		background-size: cover;
	}
	
	.title {
		text-align: center;
		font-size: 26px;
		color: white;
		margin: 0 auto;
		margin-top: 50px;
	}
	
	.main {
		position: relative;
		padding: 30px 20px;
	}
	
	.text {
		padding-bottom: 10px;
	}
	
	.btn .van-button--normal {
		width: 100%;
	}
	
	.text /deep/ .van-cell {
		background-color: transparent;
	}
	
	.text /deep/ .van-cell-group {
		background-color: transparent;
	}
	
	.text /deep/ .van-field__left-icon .van-icon,
	.van-field__right-icon .van-icon {
		color: white;
	}
	
	.text /deep/ .van-field__label {
		color: white;
	}
	
	.text /deep/ .van-field__control {
		color: white;
	}
	
	.text /deep/ .van-field__label {
		width: 65px;
	}
	
	.text /deep/ .van-hairline--top-bottom::after,
	.van-hairline-unset--top-bottom::after {
		border: 0;
	}
	
	.forget {
		font-size: 13px;
		float: right;
		color: white;
		padding-top: 20px;
	}
</style>